import React, { Component } from "react";
import {
  View,
  Image,
  StyleSheet,
  Text,
  FlatList,
  Modal,
  TouchableWithoutFeedback,
  ActivityIndicator,
} from "react-native";
import NetUtil from "../../net/net_util";
import { width } from "../../util/apdater_util";
import ImageViewer from "react-native-image-zoom-viewer";
import  LinearGradient from 'react-native-linear-gradient';
import Loading from "../../widget/Loading";
import Toast from "../../widget/Toast";

export default class JobContributeList extends Component{
  constructor(props) {
    super(props);
    this.page={
      pageNum:1,
      pageSize:10
    };
    this.loading=false;
    this.callback=null;
    this.state={
      jobId:'',
      workInfo:{
        status:1
      },
      dataList:[],
      isImageViewer:false,
      isMoreLoading:true,
      refreshing:false,
      imageIndex:0,
      photos:[],
    }
  }

  componentDidMount() {
    this.state.jobId=this.props.jobId;
    this.callback=this.props.callback;
    this.setState({
      jobId:this.state.jobId,
      workInfo:this.props.data
    })
    this.getContributeList()
  }

  /*刷新*/
  reload(){
    this.page.pageNum=1
    this.getContributeList()
  }

  clearData(){
    this.setState({dataList:[],isMoreLoading:true})
  }

  /*预览大图*/
  imagePreviewViewer(source,index){
    let imageList=source.map((img,idx)=>{
      return {url:img}
    })
    this.setState(
      {imageIndex:index,
        isImageViewer:true,
        photos:imageList})
  }

  /*获取投稿列表*/
  getContributeList(){
    let params={
      jobId:this.state.jobId,
      pageNum:this.page.pageNum,
      pageSize:this.page.pageSize
    }
    this.loading=true
    NetUtil.get('work/job/draft/page',params,(res)=>{
      console.log(res)
      this.loading=false
      if(res.code=200){
        let list=this.state.dataList;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        this.setState({dataList:list,isMoreLoading:res.data.data.length<10?false:true})
      }
    })
  }

  /*选为最佳*/
  selectBest(item){
    let params={
      jobDraftId:item.id,
      jobId:this.state.jobId
    }
    Loading.show()
    NetUtil.postFrom('work/job/good/draft',params,(res)=>{
      Loading.hide()
      if(res.code==200){
        Toast.add('操作成功')
        item.isGood=1
        this.setState({
          dataList:this.state.dataList,
          status:3
        })
      }
      else {
        Toast.add(res.msg)
      }
    })
  }

  async _endReached(){
    if(!this.state.isMoreLoading||this.loading)return;
    this.page.pageNum++
    this.getContributeList()
  }

  _renderContributeCell=(info)=>{
    let item=info.item
    return (
      <View style={styles.contributeCell}>
        <Image style={styles.portrait} source={{uri:item.avatar}}></Image>
        <View style={styles.contributeInfo}>
          <Text style={styles.nickName}>{item.nickName}</Text>
          {info.item.isShow==1?(
            <View>
              <Text style={styles.contributeDes}>{item.content}</Text>
              <View style={styles.contributeImgBox}>
                {item.images.map((img,idx)=>{
                  return (
                    <TouchableWithoutFeedback onPress={this.imagePreviewViewer.bind(this,item.images,idx)} key={'c_img'+idx}>
                      <Image style={styles.contributeImg} key={'img'+idx} source={{uri:img}}></Image>
                    </TouchableWithoutFeedback>
                  )
                })}
              </View>
              <View style={styles.contributeFooter}>
                <Text style={styles.footerTitle}>编号 {item.code}</Text>
                <Text style={styles.footerTitle}>{item.createTime}</Text>
              </View>
            </View>
          ):(
            <View style={styles.blank}>
              <Image style={styles.passwordIcon} source={require('../../img/password_icon.png')}></Image>
              <Text style={styles.blankTitle}>仅需求方可见</Text>
            </View>
          )}
        </View>
        {(this.state.workInfo.status==2&&this.state.workInfo.isSelf)?(
          <LinearGradient style={styles.best} colors={['#e79c58','#f8da85']} start={{x:0,y:1}}>
            <TouchableWithoutFeedback onPress={this.selectBest.bind(this,item)}>
              <Text style={styles.bestTitle}>选为最佳</Text>
            </TouchableWithoutFeedback>
          </LinearGradient>
        ):null}
        {info.item.isGood==1?(<Image style={styles.flag} source={require('../../img/best_icon.png')}></Image>):null}
      </View>
    )
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 15,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  render() {
    return (<View style={{flex:1 ,width:'100%'}}>
      <FlatList data={this.state.dataList}
                renderItem={this._renderContributeCell}
                ListFooterComponent={()=>this.renderFooter()}
                showsVerticalScrollIndicator={false}
                keyExtractor={(item)=>item.id}
                scrollEnabled={false}>
      </FlatList>
      {this.state.isImageViewer?(
        <Modal transparent={true} visible={true} onRequestClose={()=> {
          this.setState({
            isImageViewer: false,
          });
        }}>
          <ImageViewer enableSwipeDown
                       enableImageZoom={true}
                       onClick={() => { // 图片单击事件
                         this.setState({
                           isImageViewer: false,
                         });
                       }}
                       imageUrls={this.state.photos}
                       onCancel={()=> {
                         this.setState({
                           isImageViewer: false,
                         });
                       }}
                       index={this.state.imageIndex}
                       saveToLocalByLongPress={false}/>
        </Modal>
      ):null}
    </View>)
  }
}

const styles=StyleSheet.create({
  contributeCell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingTop:19,
    paddingLeft:15,
  },
  contributeInfo:{
    marginLeft:15,
    flex:1,
    borderBottomWidth:1,
    borderBottomColor:'#F8F8F8',
    paddingBottom: 17,
    borderBottomStyle:'solid',
    paddingRight:15
  },
  portrait:{
    width:30,
    height:30,
    borderRadius:15
  },
  nickName:{
    color:'#1C1C1C',
    fontSize:13,
    fontWeight:'500'
  },
  contributeDes:{
    color:'#1C1C1C',
    fontSize:15,
    marginTop:15
  },
  contributeImgBox:{
    marginTop:12,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  contributeImg:{
    width:(width-85)/3.0,
    height:(width-85)/3.0,
    marginRight:5,
    borderRadius:5
  },
  contributeFooter:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:17
  },
  footerTitle:{
    color:'#C5C5C5',
    fontSize:10
  },
  blank:{
    height:100,
    width:width-20,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  passwordIcon:{
    width:30,
    height:30,
    marginLeft:-80
  },
  blankTitle:{
    color:'#959595',
    fontSize:15,
    marginLeft:11
  },
  flag:{
    width:42,
    height:42,
    position:'absolute',
    top:19,
    right:15
  },
  best:{
    position:'absolute',
    width:64,
    height:26,
    borderRadius:13,
    right:15,
    top:22
  },
  bestTitle:{
    color:'#fff',
    flex:1,
    lineHeight:26,
    textAlign:'center',
    fontSize:12
  }
})
